<template>
	<h4 class="title_lv2"></h4>
	<div class="show_link">
		<a href="https://element-plus.org/zh-CN/component/tree-select.html" target="_blank">https://element-plus.org/zh-CN/component/tree-select.html</a>
	</div>
	<div class="slider-demo-block">
		<span class="demonstration">基础用法</span>
		<el-tree-select
		    v-model="value"
		    :data="data"
		    :render-after-expand="false"
		    style="width: 240px"
		  />
		<el-divider />
		<span class="demonstration">可单选</span>
		  <el-tree-select
		    v-model="value"
		    :data="data"
		    :render-after-expand="false"
		    show-checkbox
		    style="width: 240px"
		  />
		<el-divider />
		<span class="demonstration">可复选</span>
		<el-tree-select
		    v-model="value"
		    :data="data"
		    multiple
		    :render-after-expand="false"
		    show-checkbox
		    style="width: 240px"
		  />
	</div>
	<!-- 页面代码 源码 -->
	<dropWrap key="oreo">
		<pre><code class="language-js">{{ htmlCode }} </code></pre>
	</dropWrap>
	<!-- 页面代码 源码 -->

</template>

<script lang="ts" setup>
	import {ref, onMounted, nextTick } from "vue";
	import dropWrap from "../dropWrap.vue";
	import Prism from "prismjs";
	
	const value = ref()
	
	const data = [
	  {
	    value: '1',
	    label: 'Level one 1',
	    children: [
	      {
	        value: '1-1',
	        label: 'Level two 1-1',
	        children: [
	          {
	            value: '1-1-1',
	            label: 'Level three 1-1-1',
	          },
	        ],
	      },
	    ],
	  },
	  {
	    value: '2',
	    label: 'Level one 2',
	    children: [
	      {
	        value: '2-1',
	        label: 'Level two 2-1',
	        children: [
	          {
	            value: '2-1-1',
	            label: 'Level three 2-1-1',
	          },
	        ],
	      },
	      {
	        value: '2-2',
	        label: 'Level two 2-2',
	        children: [
	          {
	            value: '2-2-1',
	            label: 'Level three 2-2-1',
	          },
	        ],
	      },
	    ],
	  },
	  {
	    value: '3',
	    label: 'Level one 3',
	    children: [
	      {
	        value: '3-1',
	        label: 'Level two 3-1',
	        children: [
	          {
	            value: '3-1-1',
	            label: 'Level three 3-1-1',
	          },
	        ],
	      },
	      {
	        value: '3-2',
	        label: 'Level two 3-2',
	        children: [
	          {
	            value: '3-2-1',
	            label: 'Level three 3-2-1',
	          },
	        ],
	      },
	    ],
	  },
	]
	
	let htmlCode = ref<string>(`
		<span class="demonstration">基础用法</span>
		<el-tree-select
		    v-model="value"
		    :data="data"
		    :render-after-expand="false"
		    style="width: 240px"
		  />
		<el-divider />
		<span class="demonstration">可单选</span>
		  <el-tree-select
		    v-model="value"
		    :data="data"
		    :render-after-expand="false"
		    show-checkbox
		    style="width: 240px"
		  />
		<el-divider />
		<span class="demonstration">可复选选</span>
		<el-tree-select
		    v-model="value"
		    :data="data"
		    multiple
		    :render-after-expand="false"
		    show-checkbox
		    style="width: 240px"
		  />
		  
		js部分-data数据格式
		const data = [
		  {
		    value: '1',
		    label: 'Level one 1',
		    children: [
		      {
		        value: '1-1',
		        label: 'Level two 1-1',
		        children: [
		          {
		            value: '1-1-1',
		            label: 'Level three 1-1-1',
		          },
		        ],
		      },
		    ],
		  },
		]
	`);

	/*
	生命周期
	*/
	onMounted(() => {
		nextTick(() => {
			Prism.highlightAll();
		});
	});
</script>
<style scoped>
	
</style>